import React from 'react'
import styles from './index.less'
import { useCanvasContext } from '@/store/hooks'
import { isGraphComponent, defualtCommonStyle } from '@/constants'
// 默认样式
const defaultStyle = {
	...defualtCommonStyle,
	width: 120,
	height: 120,
	borderColor: 'blue',
	backgroundColor: 'blue',
}

// 拼接样式
const settings = [
	{
		value: '',
		style: {
			...defaultStyle,
			borderWidth: 1,
			borderStyle: 'solid',
			backgroundColor: 'transparent',
		},
	},
	{
		value: '',
		style: defaultStyle,
	},
]

export default function DetaiList() {
	const _canvas = useCanvasContext()

	const addCmp = _cmp => {
		_canvas.addCmp(_cmp)
	}
	const onDragStart = (e, _cmp) => {
		e.dataTransfer.setData('drag-cmp', JSON.stringify(_cmp))
	}
	return (
		<div className={styles.main}>
			<ul className={styles.box}>
				{settings.map(item => (
					<li
						onClick={() => addCmp({ ...item, type: isGraphComponent })}
						className={styles.item}
						key={item.value}
						style={{
							width: item.style.width,
							height: item.style.height,
							backgroundColor: item.style.backgroundColor,
							borderStyle: item.style.borderStyle,
							borderColor: item.style.borderColor,
						}}
						draggable="true"
						onDragStart={e =>
							onDragStart(e, { ...item, type: isGraphComponent })
						}
					></li>
				))}
			</ul>
		</div>
	)
}
